<!-- 个人主页 -->
<template> 
    <el-row>
        <el-col class="accountInfo" :span="12">
            <h2>账号信息</h2>
            <el-form label-width="6em" class="form">
                <el-form-item label="昵称：">
                    <div v-show="!nameEdit">
                        <span class="formText">{{ userStore.name }}</span>
                        <span class="editBtn" @click="nameEdit=!nameEdit" > 
                            <el-icon :size="size" :color="color">
                                <Edit />
                            </el-icon>
                            编辑
                        </span>
                    </div>
                    <div v-show="nameEdit">
                        <el-input v-model="userInfoForm.name" class="editInput"/>
                        <el-button :icon="Check" circle size="small" @click="submitEditName()"/>
                        <el-button type="info" :icon="Close" circle size="small" @click="cancelEditName()"/>
                    </div>
                </el-form-item>
                <hr />
                <el-form-item label="用户名：">
                    <span class="formText">{{ userStore.username }}</span>
                </el-form-item>
                <hr />
                <el-form-item label="密码：">
                    <span class="formText" v-show="!pwdShow">******</span>
                    <span class="formText" v-show="pwdShow">{{ showPwd }}</span>
                    <el-icon :size="size" :color="color">
                        <Hide v-show="!pwdShow" class="showPwdBtn" @click="pwdShow=!pwdShow"/>
                        <View v-show="pwdShow" class="showPwdBtn" @click="pwdShow=!pwdShow"/>
                    </el-icon>
                </el-form-item>
                <hr />
                <el-form-item label="权限：">
                    <span class="formText">{{ userStore.authorityName }}</span>
                </el-form-item>
                <hr />
                <el-form-item label="个人简介：">
                    <div v-show="!introductionEdit">
                        <span class="formText">{{ userStore.remarks }}</span>
                        <span class="editBtn" @click="introductionEdit=!introductionEdit" > 
                            <el-icon :size="size" :color="color">
                                <Edit />
                            </el-icon>
                            编辑
                        </span>
                    </div>
                    <div v-show="introductionEdit">
                        <el-input v-model="userInfoForm.remarks" class="editInput" type="textarea" rows="5"/>
                        <el-button :icon="Check" circle size="small" @click="submitEditIntroduction()"/>
                        <el-button type="info" :icon="Close" circle size="small" @click="cancelEditIntroduction()"/>
                    </div>
                </el-form-item>
                <hr /><br />
                <el-button type="primary" round class="changePwd" @click="dialogVisible=!dialogVisible">修改密码</el-button>
            </el-form>
        </el-col>
        <el-col :span="12">
            <el-calendar v-model="date" />
            <el-card class="box-card">
                <template #header>
                <div class="card-header">
                    <span>记录统计</span>
                    <el-button class="button" text @click="getStatisticsData()">刷新</el-button>
                </div>
                </template>
                <div class="text item">收入记录条数：{{ rev }}条</div>
                <div class="text item">支出记录条数：{{ exp }}条</div>
            </el-card>
        </el-col>
    </el-row>

    <!-- 修改密码弹框 -->
    <el-dialog v-model="dialogVisible" title="修改密码" destroy-on-close="true" :before-close="handleClose" align-center>
        <el-form ref="changePwdForm" :model="pwdForm" :rules="changeRules" label-width="100px">
            <!-- 添加者 -->
            <el-form-item label="新密码：" prop="newpwd" >
                <el-input type="password" v-model="pwdForm.newpwd" placeholder="请输入新密码" />
            </el-form-item>
            <el-form-item label="确认密码：" prop="confirmPwd">
                <el-input type="password" v-model="pwdForm.confirmPwd" placeholder="请再次输入密码"/>
            </el-form-item>
            <el-button type="primary" class="loginBtn" style="float: right; margin-bottom: 20px;" @click="changePassword()">
              确认修改
            </el-button>
        </el-form>
    </el-dialog>
</template>

<script setup>
import { reactive, onMounted, ref } from 'vue';
import { Edit,Check,Close } from '@element-plus/icons-vue';
import { editByUsername, getInfo } from '@/api/user';
import { getStatisticsByUsername } from '@/api/revexp';
import { userInfoStore } from '@/store';

const userStore = userInfoStore();

const nameEdit = ref(false);
const introductionEdit = ref(false);
const pwdShow = ref(false);
let dialogVisible = ref(false);
const showPwd = ref('');
const date = ref(new Date());
const rev = ref(0);//收入
const exp = ref(0);//支出

const changePwdForm = ref(null);

const pwdForm = reactive({
    username: '',
    newpwd: '',
    confirmPwd: '',
})

const userInfoForm = reactive({
  name: '',
  username: '',
  password: '',
  remarks: '',
})

const changePassword = ()=> {
    let data = {
        username: userStore.username,
        password: pwdForm.newpwd,
    }
    changePwdForm.value.validate((valid) => {
        if(valid){
            editByUsername(data).then(() => {
                getInfo(userStore.username).then(() => {
                    showPwd.value = data.password;
                    handleClose();
                    window.localStorage.removeItem("token");
                })
            })
        }
    })
}

//确认密码校验
const confirmPassword = (rule,value,callback) => {
    value !== pwdForm.newpwd ? callback(new Error("两次密码输入不一致")) : callback();
};
const changeRules = {
    newpwd: [{ required: true, message: "密码不能为空", trigger: "blur" }],
    confirmPwd: [{ required: true, message: "确认密码不能为空", trigger: "blur" },
                    { trigger:  "blur", validator: confirmPassword }],
};

const submitEditName = ()=> {
    let data = {
        username: userInfoForm.username,
        name: userInfoForm.name,
    }
    editByUsername(data).then(() => {
        //刷pinia用户信息
        getInfo(userStore.username);
    });
    nameEdit.value = (!nameEdit.value);
}
const cancelEditName = ()=> {
    userInfoForm.name = userStore.name;
    nameEdit.value = (!nameEdit.value);
}

const submitEditIntroduction = ()=> {
    let data = {
        username: userInfoForm.username,
        remarks: userInfoForm.remarks,
    }
    editByUsername(data).then(() => {
        getInfo(userStore.username)
    });
    introductionEdit.value = (!introductionEdit.value);
}
const cancelEditIntroduction = ()=> {
    userInfoForm.remarks = userStore.remarks;
    introductionEdit.value = (!introductionEdit.value);
}

//弹窗关闭的时候
const handleClose = () => {
    changePwdForm.value.resetFields();
    dialogVisible.value = false;
};

//获取统计数据
const getStatisticsData = () => {
    getStatisticsByUsername(userStore.username).then((res) => {
        rev.value = res.data["rev"];
        exp.value = res.data["exp"];
    })
}

onMounted(() => {
    showPwd.value = userStore.password;
    getStatisticsData();
})
</script>

<style>
.changePwd {
    margin-left: 43%;
}

hr {
    width: 70%;
}

.editInput {
    display: inline; 
    margin-right: 10px;
}

.formText {
    padding-left: 1em;
    padding-right: 1em;
}

h2 {
    text-align: center;
    padding-bottom: 50px;
    padding-top: 20px;
    font-size: 2em;
}

.el-textarea__inner {
    width: 250px;
}

.el-form-item {
    width: 500px;
    padding-left: 18%;
}

.editBtn{
    cursor: pointer;
    color: rgb(64, 64, 206);
    opacity: 0;
}

.editBtn:hover{
    opacity: 1;
}

.showPwdBtn {
    cursor: pointer;
}
.el-calendar-table .el-calendar-day {
    height: 5vh;
}

/* 卡片 */
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.box-card {
  margin: 20px 0px;
  width: 100%;
  height: 40%;
}
</style>